<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Descartes Framework Demo Page</title>
  <!-- Reset styles -->
  <link rel="stylesheet" type="text/css" href="css/dc-reset.min.css" />
  <!-- Layout styles -->
  <link rel="stylesheet" type="text/css" href="css/dc-layout.css" />
  <!-- Basic HTML styles for the demo -->
  <link rel="stylesheet" type="text/css" href="css/dc-demo.css" />
</head>
<body>
  <h1>Descartes Layout Framework</h1>
  <div id="about">
    <h2>About the Framework</h2>
    <img src="img/framed-hals-portrait-of-descartes.png" width="200" height="230" alt="Descartes portrait" />
    <h3>What is it?</h3>
    <p>The <em>Descartes Layout Framework</em> is a variant of the floated, negative margin-based layouts used in <cite><a href="http://developer.yahoo.com/yui/grids/">YUI Grids</a></cite> and A List Apart's <cite><a href="http://www.alistapart.com/articles/negativemargins/">Creating Liquid Layouts with Negative Margins</a></cite>.</p>
    <form id="dc-control">
      <div>
        <fieldset>
          <legend>Layout Settings</legend>
          <div id="dc-layout">
            <!-- Layout chooser -->
            <label for="dc-layout-select">Column Display Order:</label>
            <select id="dc-layout-select">
              <option value="none"></option>
              <optgroup label="Two columns" id="dc-2-columns">
                <option value="layout-1-2">1-2</option>
                <option value="layout-2-1">2-1</option>
              </optgroup>
              <optgroup label="Three columns" id="dc-3-columns">
                <option value="layout-2-1-3">2-1-3</option>
                <option value="layout-3-1-2">3-1-2</option>
                <option value="layout-1-2-3">1-2-3</option>
                <option value="layout-3-2-1">3-2-1</option>
              </optgroup>
            </select>
            <!-- /Layout chooser -->
          </div>
          <div id="dc-column-gutter">
            <!-- Column gutter -->
            <label for="dc-column-gutter-width">Gutter Width:</label>
            <input id="dc-column-gutter-width" type="text" value="21" maxlength="2" />
            <!-- /Column gutter -->
          </div>
          <div id="dc-column-padding">
            <!-- Column padding -->
            <label for="dc-column-padding-width">Column Padding:</label>
            <input id="dc-column-padding-width" type="text" value="10" maxlength="2" />
            <!-- /Column padding -->
          </div>
          <div id="dc-column-2" style="display:none;">
            <!-- Column 2 width -->
            <label for="dc-column-2-width">Column 2 Width:</label>
            <input id="dc-column-2-width" type="text" value="210" maxlength="3" />
            <!-- /Column 2 width -->
          </div>
          <div id="dc-column-3" style="display:none;">
            <!-- Column 3 width -->
            <label for="dc-column-3-width">Column 3 Width:</label>
            <input id="dc-column-3-width" type="text" value="210" maxlength="3" />
            <!-- /Column 3 width -->
          </div>
          <div id="dc-code-output">
            <!-- Code output -->
            <label for="dc-code-output-display">Code ouput:</label>
            <textarea id="dc-code-output-display"></textarea>
            <!-- /Code ouput -->
          </div>
        </fieldset>
      </div>
    </form>
  </div>
  
  
  <!-- Builder -->
  <div class="dc-container" id="dc-builder"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>DC Builder</h2>
      <p>This layout contains one fixed-width column at left, and one fluid width column at right. The source order of the columns is right column, left column.</p>
    </div><!-- /header -->
    <div id="bd"><!-- body -->
      <div id="default">
        <h3>Meditatio I.</h3>
        <h4>De iis quae in dubium revocari possunt.</h4>
        <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
      </div>
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in <a href="#layout-1-2">the previous example</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /Builder -->
  
  
  <!-- jQuery library -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="res/libraries/jquery.sprintf.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    // Prepare some 'greeking,' markup and other variables:
    var contentOne = '<h3>Meditatio I.</h3><h4>De iis quae in dubium revocari possunt.</h4><p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>',
        contentTwo = '<h3>Meditatio II.</h3><h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4><p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>',
        contentThree = '<h3>Meditatio III.</h3><h4>De Deo, quod existat.</h4><p>Claudam nunc oculos, aures obturabo, avocabo omnes sensus, imagines etiam rerum corporalium omnes vel ex cogitatione mea delebo, vel certe, quia hoc fieri vix potest, illas ut inanes et falsas nihili pendam, meque solum alloquendo, et penitius inspiciendo, meipsum paulatim mihi magis notum et familiarem reddere conabor. Ego sum res cogitans, id est dubitans, affirmans, negans, pauca intelligens, multa ignorans, volens, nolens, imaginans etiam et sentiens&hellip;</p>',
        $twoColumnMarkup = $.sprintf('<div class="dc-main"><div class="dc-div">%s</div></div><div class="dc-sub">%s</div>', contentOne, contentTwo),
        $threeColumnMarkup = $.sprintf('<div class="dc-main"><div class="dc-div"><div class="dc-main"><div class="dc-div">%s</div></div><div class="dc-sub">%s</div></div></div><div class="dc-sub">%s</div>', contentOne, contentTwo, contentThree),
        $dcLayoutSelect = $('#dc-layout-select'),
        $dcLayoutContainer = $('#bd'),
        $dcColumnGutterWidth = parseInt($('#dc-column-gutter-width').val());
        $dcColumnPaddingWidth = parseInt($('#dc-column-padding-width').val());
        $dcColumnTwo = $('#dc-column-2'),
        $dcColumnTwoWidth = parseInt($('#dc-column-2-width').val());
        $dcColumnThree = $('#dc-column-3'),
        $defaultContent = $dcLayoutContainer.html();
    // Build the behaviour into the select element:
    $dcLayoutSelect.change(function(){
    
      // Has the user asked for two or three columns?
      $dcOptgroupId = $dcLayoutSelect.find('option:selected').parent().attr('id');
      if($dcOptgroupId == 'dc-2-columns') { // If it's two...
        $currentMarkup = $twoColumnMarkup;
        $dcColumnTwo.show('slow');
        $dcColumnThree.hide('slow');
        $dcLayoutClass = $(this).val();
        
        //dcTest = '.layout-2-1 .dc-main { float:right; margin:0 0 0 -231px; } .layout-2-1 .dc-sub { float:left; padding-left:0; padding-right:0; width:210px; } .layout-2-1 .dc-main .dc-div { margin:0 0 0 231px; }';
        
        // Prepare an object for use with sprintf and .css():
        var dcCssProperties = {};
        // Some of the things we need to calculate are independent of which
        // layout this is:
        //
        // The class for the overall layout:
        dcCssProperties.dcLayoutClass = $dcLayoutClass;
        // The width of the sidebar plus gutter:
        dcCssProperties.dcSubAllowance = $dcColumnTwoWidth + $dcColumnGutterWidth;
        // Sidebar padding:
        dcCssProperties.dcSubPadding = $dcColumnPaddingWidth > 0 ? $dcColumnPaddingWidth + 'px' : '0';
        // Main column padding: 
        dcCssProperties.dcDivPadding = dcCssProperties.dcSubPadding;
        // Sidebar width (allowing for padding):
        dcCssProperties.dcSubWidth = $dcColumnTwoWidth - (2 * $dcColumnPaddingWidth);
        switch($dcLayoutClass) {
          case 'layout-2-1':
            // Float sidebar this way:
            dcCssProperties.dcSubFloat = 'left';
            // Main column floats this way:
            dcCssProperties.dcMainFloat = 'right';
            // Margin declaration for main column:
            dcCssProperties.dcMainMargin = $.sprintf('0 0 0 -%dpx', dcCssProperties.dcSubAllowance);
            // Margin declaration for .dc-div (also main column):
            dcCssProperties.dcDivMargin = $.sprintf('0 0 0 %dpx', dcCssProperties.dcSubAllowance);
            break;
          case 'layout-1-2':
            // Float sidebar this way:
            dcCssProperties.dcSubFloat = 'right';
            // Main column floats this way:
            dcCssProperties.dcMainFloat = 'left';
            // Margin declaration for main column:
            dcCssProperties.dcMainMargin = $.sprintf('0 -%dpx 0 0', dcCssProperties.dcSubAllowance);
            // Margin declaration for .dc-div (also main column):
            dcCssProperties.dcDivMargin = $.sprintf('0 %dpx 0 0', dcCssProperties.dcSubAllowance);
            break;
        }
        // Sprintf the whole lot into an output string:
        dcCssOutput = $.sprintf(".%(dcLayoutClass)s .dc-main { float:%(dcMainFloat)s; margin:%(dcMainMargin)s; }\n.%(dcLayoutClass)s .dc-sub { float:%(dcSubFloat)s; padding-left:%(dcSubPadding)s; padding-right:%(dcSubPadding)s; width:%(dcSubWidth)spx; }\n.%(dcLayoutClass)s .dc-main .dc-div { margin:%(dcDivMargin)s; padding-left:%(dcDivPadding)s; padding-right:%(dcDivPadding)s; }\n", dcCssProperties);
        // Output CSS:
        $('#dc-code-output-display').append("\n\n" + dcCssOutput);
        // Replace the current markup with the markup suitable to the number of requested columns...
        $dcLayoutContainer.html($currentMarkup);
        // And replace the classname that arranges the columns too...
        $dcLayoutContainer.attr({class: dcCssProperties.dcLayoutClass});
        // Finally, apply CSS:
        $dcMain = $dcLayoutContainer.find('.dc-main ');
        $dcSub = $dcLayoutContainer.find('.dc-sub');
        $dcDiv = $dcMain.find('.dc-div');
        $dcMain.css({
          float: dcCssProperties.dcMainFloat,
          margin: dcCssProperties.dcMainMargin
        });
        $dcSub.css({
          float: dcCssProperties.dcSubFloat,
          paddingLeft: dcCssProperties.dcSubPadding,
          paddingRight: dcCssProperties.dcSubPadding,
          width: dcCssProperties.dcSubWidth
        });
        $dcDiv.css({
          margin: dcCssProperties.dcDivMargin,
          paddingLeft: dcCssProperties.dcDivPadding,
          paddingRight: dcCssProperties.dcDivPadding
        });
      } else if($dcOptgroupId == 'dc-3-columns') { // If it's three...
        $currentMarkup = $threeColumnMarkup;
        $dcColumnTwo.show('slow');
        $dcColumnThree.show('slow');
      } else if($(this).val() == 'none') {
        $currentMarkup = $defaultContent; 
        $dcColumnTwo.hide('slow');
        $dcColumnThree.hide('slow');
      }
    });
    
  });
  </script>
</body>
</html>